import { useCatStore } from '@/store/CatStore'

export const CatBox = () => {
  const total = useCatStore(state => state.total)
  const summary = useCatStore(state => state.summary)
  const bigCats = useCatStore(state => state.cats.bigCats)
  const smallCats = useCatStore(state => state.cats.smallCats)
  const increaseBigCats = useCatStore(state => state.increaseBigCats)
  const increaseSmallCats = useCatStore(state => state.increaseSmallCats)

  return (
    <div className="box">
      <h1>CatBox</h1>
      <p>{Math.random()}</p>
      <p>total:{total}</p>
      <p>BigCats: {bigCats}</p>
      <p>SmallCats: {smallCats}</p>
      <button onClick={increaseBigCats}>add Bigcat</button>
      <button onClick={increaseSmallCats}>add Smallcat</button>
      <button onClick={summary}>get summary</button>
    </div>
  )
}
